
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title style="height: 500px">朋友圈动态</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/css/myStrategyComment.css"/>
    <link rel="stylesheet" href="/css/app.css">
    <link rel="stylesheet" href="/css/dynamic.css">
    <script src="/js/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <link rel="stylesheet" href="/js/jqueryAlert/common.css">
    <script src="/js/jqueryAlert/alertPopShow.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/checkLogin.js"></script>


</head>
<body>


<script>
    $(function () {
        //当前用户回显
        $('header').renderValues(user);

        //滚动分页
        //分页查询时的数据渲染
        //当前页
        var currentPage = 1;
        //数据容器,将查询到的游记数组的数据全部存到该容器中,再拿该容器的内容去渲染界面
        var travels = [];
        //总页数
        var pages;
        //标记是否可以进行查询,相当于同步锁
        var loading = true;

        //查询填充数据的方法,queryUrl是查询的请求资源,obj是被进行数据渲染的jQuery对象
        function query() {
            if (loading) {
                //当有查询任务在进行时,关闭可查询开关
                loading = false;
                //当前用户的朋友圈
                $.get(baseUrl+"/users/"+user.id+"/dynamics",{currentPage:currentPage},function (data) {
                    console.log(data);
                    if (data.size!=0){

                        $.merge(travels, data.list);
                        //插入动态 显示发布时间
                        $("#list").renderValues({list:travels},
                            {
                                getDate:function (item,value) {
                                    $(item).html(getDateDetail(value));
                                },
                                getGoodUserName:function (item,value) {//点赞回显
                                    var temp="";
                                    $.each(value,function (index,ele) {
                                        temp+=ele.nickName+" ";

                                    });
                                    $(item).html(temp);


                                },
                                getComment:function (item,value) {		//评论回显
                                    console.log(value);
                                    var dynamicid = 1;
                                    var temp = '';
                                    $.each(value,function (index,ele) {
                                        console.log(ele);
                                        if(ele.reply){
                                            temp+="<p class='data-name' data-dynamicid='"+ele.dynamic.id+"' data-byuserid='"+ele.sender.id+"'><span >"+ele.sender.nickName+"</span>回复<span>"+ele.reply.nickName+"</span><span>：</span>"+ele.content+"</p>";
                                        }else{
                                            temp+="<p class='data-name' data-dynamicid='"+ele.dynamic.id+"' data-byuserid='"+ele.sender.id+"'><span >"+ele.sender.nickName+"</span><span>: </span>"+ele.content+"</p>";
                                        }
                                    });
                                    $(item).html(temp);
                                },
                                getDynamicId:function (item,value) {//渲染时 每个点赞按钮绑定动态的id
                                    $(item).attr("data-id",value);
                                    $(item).children("span").attr("data-id",value);

                                }

                            });

                        //=============================人名点击回复 带被回复人
                        $(".data-name").click(function () {
                            var _this =this;//用于回复成功 拼接回复内容回去
                            var byUserId = $(this).data("byuserid"); //被回复人的id
                            var byUserName = $(this).children("span:first").html(); //被回复人的名字
                            var dynamicId = $(this).data("dynamicid"); //取出当前动态的id
                            //如果是回复评论 占位符中显示被回复的人的nickName
                            var html = "<label>内容：<input class='confirm_input' placeholder='回复 : "+byUserName+"'></label>";
                            popTipShow.confirm('回复',html,['回 复','取 消'],
                                function(e){
                                    //callback 处理按钮事件
                                    var button = $(e.target).attr('class');
                                    if(button == 'ok'){
                                        if(null==$(".confirm_input").val() || ""==$(".confirm_input").val()){
                                            webToast("评论不能为空！","bottom", 3000);
                                            return;
                                        }
                                        this.hide();
                                        //按下确定按钮执行的操作
                                        var content = $(".confirm_input").val(); //取出内容
                                        var dynamicComment ={//评论对象
                                            content:content
                                        };
                                        $.post(baseUrl+"/dynamics/"+dynamicId+"/dynamicComments/"+byUserId,dynamicComment,function (data) {
                                            if (data.success) {
                                                //============如果成功把回复的内容拼接过去
                                                var temp = "<p class='data-name' data-dynamicid='"+dynamicId+"' data-byuserid='"+user.id+"'>" +
                                                    "<span >"+user.nickName+"</span>回复" +
                                                    "<span>"+byUserName+"</span>" +
                                                    "<span>：</span>"+content+"</p>"
                                                $(_this).parent().children(":last").append(temp);
                                            }
                                        },"json");

                                    }
                                    if(button == 'cancel') {//取消
                                        this.hide();

                                    }
                                }
                            );

                        });

                        //================================回复按钮的点击事件
                        $(".userComment").click(function () {
                            var _this =this;//用于回复成功 拼接回复内容回去
                            var dynamicId = $(this).data("id"); //取出当前回复的动态的id
                            //如果是回复评论 占位符中显示被回复的人的nickName
                            var html = "<label>内容：<input class='confirm_input' placeholder=''></label>";
                            popTipShow.confirm('回复',html,['回 复','取 消'],
                                function(e){
                                    //callback 处理按钮事件
                                    var button = $(e.target).attr('class');
                                    if(button == 'ok'){
                                        if(null==$(".confirm_input").val() || ""==$(".confirm_input").val()){
                                            webToast("评论不能为空！","bottom", 3000);
                                            return;
                                        }
                                        this.hide();
                                        //按下确定按钮执行的操作
                                        var content = $(".confirm_input").val(); //取出内容
                                        var dynamicComment ={//评论对象
                                            content:content

                                        };
                                        $.post(baseUrl+"/dynamics/"+dynamicId+"/dynamicComments/-1",dynamicComment,function (data) {
                                            if (data.success) {//拼接无回复人的状态
                                                var temp = "<p class='data-name' data-dynamicid='"+dynamicId+"' data-byuserid='"+user.id+"'>" +
                                                    "<span >"+user.nickName+"</span>" +
                                                    "<span>: </span>"+content+"</p>"
                                                if ($(_this).parent().siblings(".cmt-wrap").children(":last").find("p").length>0) {//如果没人回复信息
                                                    $(_this).parent().siblings(".cmt-wrap").children(":last").children(":last").append(temp);
                                                }else{//如果有人回复了信息
                                                    $(_this).parent().siblings(".cmt-wrap").children(":last").append(temp);
                                                }
                                            }
                                        });
                                    }
                                    if(button == 'cancel') {//取消
                                        this.hide();
                                    }
                                }
                            );

                        });
                        //点赞按钮的点击事件================================
                        $(".userGood").click(function () {
                            var temp = $(this).data("id");//动态的id(dynamicId)
                            // console.log(temp);

                            $.ajax({
                                url:baseUrl+"/dynamics/"+temp+"/dynamicGoods",
                                method:"POST",
                                success:function () {
                                    var names = $("span[data-id='" + temp + "']").html();
                                    if (names.indexOf(user.nickName)>-1) {
                                        $("span[data-id='" + temp + "']").html(names.replace(user.nickName,""));
                                    }else{
                                        $("span[data-id='" + temp + "']").html(names+user.nickName);
                                    }
                                }
                            })
                        });

                        //图片点击放大功能
                        $(".list-img").click(function () {
                            var _this = $(this);//将当前的pimg元素作为_this传入函数
                            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);

                        });
                        function imgShow(outerdiv, innerdiv, bigimg, _this) {
                            var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
                            $(bigimg).attr("src", src);//设置#bigimg元素的src属性
                            $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg


                            $(outerdiv).click(function () {//再次点击淡出消失弹出层
                                $(this).fadeOut("fast");
                            });
                        }

                        //当前页自增
                        currentPage++;
                        //总页数
                        pages = data.pages;
                        //当查询结束之后,打开查询开关
                        loading = true;


                    }else {
                        loading = true;
                        $("#list").html('<img src="/img/1d.jpg" width="100%">')
                    }


                });
            }
        }


        query();
        $(window).scroll(function () {
            // console.log("窗口在滚动");
            if (($(window).height() + $(document).scrollTop()) >= $(document).height() - 10) {
                if (currentPage <= pages) {
                    query();
                } else {
                    if (($(window).height() + $(document).scrollTop()) >= $(document).height()-1) {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '客官,已经到底啦!',
                            autoClose: 1000,
                            position: 'bottom'  // center: 居中; bottom: 底部
                        });
                    }

                }
            }
        });
    })
</script>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div id="outerdiv" style="position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.7); z-index: 2; width: 100%; height: 100%; display: none;">
                <div id="innerdiv" style="margin:auto;width: 800px; height: 800px;margin-top:33%;">
                    <img id="bigimg" style="border: 5px solid #fff; margin: 0 auto;width: 366px; height: 400px; " src="" />
                </div>
            </div>
        </div>
    </div>
</div>



<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:window.history.go(-1)">
                <span><i class="fa fa-chevron-left" ></i></span>
            </a>
        </div>
        <div class="col">
            <span>我的朋友圈</span>
        </div>
        <div class="col"></div>
    </div>
</div>
<!--背景图片-->
<div style="margin:0 auto;display:none;">
    <img class="data-avt" src="/img/0.jpg">
</div>
<header>
    <img id="bg" render-src="coverImgUrl" height="250px">
    <p id="user-name" class="data-name" render-html="nickName"></p>
    <!--头像-->
    <img id="avt" class="data-avt" render-src="headImgUrl">
</header>
<div id="main">

    <div id="list" >
        <ul >
            <div render-loop="list">
                <li>
                    <div class="po-avt-wrap">
                        <img class="po-avt data-avt" render-src="list.dynamic.user.headImgUrl">
                    </div>
                    <div class="po-cmt">
                        <div class="po-hd">
                            <p class="po-name"><span class="data-name" render-html="list.dynamic.user.nickName">唐老爷</span></p>
                            <div class="post">
                                <p render-html="list.dynamic.content"></p>

                                <ul class="comment-img" render-loop="list.dynamic.imgUrlsArr">
                                    <li >
                                        <img class="list-img" render-src="list.dynamic.imgUrlsArr.self" style="height: 300px;">
                                    </li>
                                </ul>

                            </div>
                            <p class="time"  render-key="list.dynamic.createTime" render-fun="getDate"></p>
                            <a class="userComment"  data-id="" render-key="list.dynamic.id" render-fun="getDynamicId" ><!--评论按钮-->
                                <img class="c-icon" src="/img/c.png">
                            </a>
                        </div>
                        <div class="r"></div>
                        <div class="cmt-wrap">
                            <div class="like">
                                <a class="userGood"  data-id="" render-key="list.dynamic.id" render-fun="getDynamicId">
                                    <img src="/img/l.png"><!--点赞按钮-->
                                    <span class="thumb" render-key="list.likeUsers" render-fun="getGoodUserName" >

							        </span>
                                </a>
                            </div>
                            <!--data-id="" render-key="list.dynamic.id" render-fun="getDynamicId"-->
                            <div class="cmt-list"  render-key="list.comments" render-fun="getComment">

                            </div>
                        </div>
                    </div>
                </li>
            </div>


        </ul>
    </div>

</div>

<script>

    function safetostring(str) {
        return String(str).replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&#39;/g, "'");
    }

    //$("#list").html($("#scene").html());

    setTimeout(function () {
        // $(".data-name").text(safetostring(nickname));
        //$(".data-avt").attr("src", headimgurl);
        var cw = $('.list-img').width();
        $('.list-img').css({'height': cw + 'px'});
    }, 0);

    $(window).resize(function () {
        var cw = $('.list-img').width();
        $('.list-img').css({'height': cw + 'px'});
    });


    $(document.body).show();
    //日期格式
    function getDateDetail(date){
        var d = new Date(parseInt(date));
        console.log(d);
        var year = d.getFullYear();
        var month = d.getMonth()+1;
        var day = d.getDate();
        var hour  = d.getHours();
        var minute = d.getMinutes();

        var dNow = new Date();
        var yearNow = dNow.getFullYear();
        var monthNow = dNow.getMonth()+1;
        var dayNow = dNow.getDate();
        var hourNow  = dNow.getHours();
        var minuteNow = dNow.getMinutes();
        if(year==yearNow){
            if(month==monthNow){
                if(day==dayNow){
                    if(hour==hourNow){
                        if (minute == minuteNow) {
                            return "刚刚";
                        }else {
                            return (minuteNow-minute)+"分钟前";
                        }
                    }else{
                        return (hourNow-hour)+"小时前";
                    }
                }else{
                    if(dayNow-day<=3){
                        return (dayNow-day)+"天前";
                    }
                }
            }
        }
        return year+"-"+month+"-"+day;
    }




</script>

</body>
</html>